import React from 'react'
import { ScrollView, Text, View, KeyboardAvoidingView, TouchableOpacity, Image } from 'react-native'
import { Metrics, Colors } from '../../Themes'
import { API, WINDOW } from '../../Services'
import styles from '../Styles/CommonContainerStyles'
import ListViewSeparator from '../../Components/ListViewSeparator'

import Button from 'apsl-react-native-button'
import { SegmentedControl, WhiteSpace } from '@ant-design/react-native';

class ZhiDingScreen extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            id: this.props.route.params?.id,
            zhiding_city: WINDOW.loginAddress.city,
            zhiding_time: 24 * 60 * 60,
            type: this.props.route.params?.type,
        }
    }
    componentDidMount() {
    }

    //商品置顶
    _fetch_addZhiding() {
        const { zhiding_city, zhiding_time, id } = this.state
        API.addZhiding(zhiding_city.join(' '), zhiding_time, id).then((response) => {
            const { ok, data } = response
            if (ok && (data === 1)) {
                WINDOW.showToastSuccess('置顶成功')
                this.props.navigation.goBack()
            } else {
                WINDOW.showToastError('置顶失败')
            }
        })
    }

    //招工置顶
    _fetch_addZhiding2() {
        const { zhiding_city, zhiding_time, id } = this.state
        API.addZhiding2(zhiding_city.join(' '), zhiding_time, id).then((response) => {
            const { ok, data } = response
            if (ok && (data === 1)) {
                WINDOW.showToastSuccess('置顶成功')
                this.props.navigation.goBack()
            } else {
                WINDOW.showToastError('置顶失败')
            }
        })
    }

    _doAdd = () => {
        if (this.state.type === 1) {
            this._fetch_addZhiding()
        } else if (this.state.type === 2) {
            this._fetch_addZhiding2()
        }
    }

    _doSelectMap = () => {
        this.props.navigation.navigate('CitySelect', { callBack: (arr) => this.setState({ zhiding_city: arr }) })
    }

    _renderFooter = () => (
        <Button
            onPress={this._doAdd}
            style={{ width: Metrics.screenWidth - 15 * 2, height: 48, alignSelf: 'center', backgroundColor: Colors.mainColor, marginTop: 15, borderWidth: 0, borderRadius: 3 }}
            textStyle={{ color: 'white', fontSize: 18, fontWeight: 'bold' }}>
            提交
        </Button>
    )



    render() {
        return (
            <View style={styles.container}>
                <KeyboardAvoidingView behavior={Metrics.isIOS ? 'padding' : null} style={{ flex: 1 }} >
                    <ScrollView keyboardShouldPersistTaps='handled'>
                        <WhiteSpace size="lg" />
                        <WhiteSpace size="lg" />
                        <Text style={{ marginLeft: 15, fontSize: 16, color: Colors.graytextColor }}>请选择置顶城市</Text>
                        <WhiteSpace size="lg" />
                        <ListViewSeparator />
                        <TouchableOpacity onPress={this._doSelectMap}>
                            <View style={{ height: 44, flex: 1, backgroundColor: 'white', flexDirection: 'row', alignItems: 'center', }}>
                                <Text style={{ flex: 1, fontSize: 16, marginLeft: 15, marginRight: 20 }}>{this.state.zhiding_city.join(' ')}</Text>
                                <Image source={require('../../Images/cell_right.png')} style={{ position: 'absolute', right: 15 }} />
                            </View>
                        </TouchableOpacity>
                        <ListViewSeparator />
                        <WhiteSpace size="lg" />
                        <WhiteSpace size="lg" />
                        <Text style={{ marginLeft: 15, marginBottom: 15, fontSize: 16, color: Colors.graytextColor }}>请选择置顶时间</Text>
                        <WhiteSpace size="lg" />
                        <SegmentedControl
                            values={['24小时', '48小时', '3天', '4天']}
                            tintColor={Colors.mainColor}
                            onChange={(e)=>{
                                console.log(e.nativeEvent.selectedSegmentIndex)
                                switch (e.nativeEvent.selectedSegmentIndex) {
                                    case 0:
                                        this.state.zhiding_time = 24 * 60 * 60
                                        break;
                                    case 1:
                                        this.state.zhiding_time = 48 * 60 * 60
                                        break;
                                    case 2:
                                        this.state.zhiding_time = 3 * 24 * 60 * 60
                                        break;
                                    case 3:
                                        this.state.zhiding_time = 4 * 24 * 60 * 60
                                        break;
                                    default:
                                        break;
                                }
                            }}
                            style={{ height: 40, width: Metrics.screenWidth - 40, alignSelf: 'center' }}
                        />
                        <WhiteSpace size="lg" />
                        <WhiteSpace size="lg" />
                        {this._renderFooter()}
                    </ScrollView>
                </KeyboardAvoidingView>
            </View>
        )
    }
}


export default ZhiDingScreen
